/* 饼图标记点创建 */

var SVG_NS = 'http://www.w3.org/2000/svg';


Donut.prototype = new TMap.DOMOverlay();

// 初始化
Donut.prototype.onInit = function(options) {
	this.id = options.id;
	this.position = options.position;
	this.data = options.data;
	this.minRadius = options.minRadius || 0;
	this.maxRadius = options.maxRadius || 35;
};

// 销毁时需解绑事件监听
Donut.prototype.onDestroy = function() {
	if (this.onClick) {
		this.dom.removeEventListener(this.onClick);
	}
};

// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
Donut.prototype.createDOM = function() {
	let svg = document.createElementNS(SVG_NS, 'svg');
	svg.setAttribute('version', '1.1');
	svg.setAttribute('baseProfile', 'full');

	let r = this.maxRadius;
	svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '));
	svg.setAttribute('width', r * 2);
	svg.setAttribute('height', r * 2);
	svg.style.cssText = 'position:absolute;top:0px;left:0px';

	let donut = createDonut(this.data, this.minRadius, this.maxRadius);
	svg.appendChild(donut);

	// click事件监听
	this.onClick = () => {
		// DOMOverlay继承自EventEmitter，可以使用emit触发事件
		this.emit('click');
	};
	svg.addEventListener('click', this.onClick);
	return svg;
};

// 更新DOM元素，在地图移动/缩放后执行
Donut.prototype.updateDOM = function() {
	if (!this.map) {
		return;
	}

	// 经纬度坐标转容器像素坐标
	let pixel = this.map.projectToContainer(this.position);

	// 使饼图中心点对齐经纬度坐标点
	let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
	let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
	this.dom.style.transform = `translate(${left}, ${top})`;
};

// 使用SVG创建环状饼图
function createDonut(data, minRadius, maxRadius) {
	const colorList = [
		'#e54d42',
		'#fbbd08',
		'#0081ff'
	];
	let sum = data.reduce((prev, curr) => prev + curr, 0);
	let angle = 0;

	let group = document.createElementNS(SVG_NS, "g");
	let _list = data.map((d,i) => {
		let item = {
			idx: i,
			num: d
		}
		return item
	}).filter(d => {
		return (d.num != undefined && d.num > 0)
	})
	if (_list.length == 1) {
		// 在创建一个圆形
		let circleShape1 = document.createElementNS(SVG_NS, 'circle');
		circleShape1.setAttribute('style', 'fill: ' + colorList[_list[0].idx]);
		circleShape1.setAttribute('cx', 0);
		circleShape1.setAttribute('cy', 0);
		circleShape1.setAttribute('r', maxRadius);
		group.appendChild(circleShape1);
	} else {
		data.forEach((d, i) => {
			if (d > 0) {
				let delta = d / sum * Math.PI * 2,
					color = colorList[i],
					r = maxRadius,
					startAngle = angle,
					endAngle = angle + delta;
				angle += delta;

				// 对每个数据创建一个扇形
				let fanShape = document.createElementNS(SVG_NS, 'path');
				fanShape.setAttribute('style', `fill: ${color};`);
				fanShape.setAttribute('d', [
					'M0 0',
					`L${r * Math.sin(startAngle)} ${-r * Math.cos(startAngle)}`,
					`A${r} ${r} 0 ${delta > Math.PI ? 1 : 0} 1 ${r * Math.sin(endAngle)} ${-r * Math.cos(endAngle)}`,
				].join(' ') + ' z');
				group.appendChild(fanShape);
			}
		});
	}


	// 在中心创建一个圆形
	let circleShape = document.createElementNS(SVG_NS, 'circle');
	circleShape.setAttribute('style', 'fill: #FFFFFF');
	circleShape.setAttribute('cx', 0);
	circleShape.setAttribute('cy', 0);
	circleShape.setAttribute('r', minRadius);
	group.appendChild(circleShape);

	// 绘制文字
	let textShape = document.createElementNS(SVG_NS, 'text');
	textShape.setAttribute('x', 0);
	textShape.setAttribute('y', '0.3em');
	textShape.setAttribute('text-anchor', 'middle');
	textShape.innerHTML = sum;
	group.appendChild(textShape);

	return group;
}

// 自定义环状饼图 - 继承DOMOverlay
export function Donut(options) {
	TMap.DOMOverlay.call(this, options);
}
